<!-- 登录 -->
<template>
	<view class="login">
		<view class="title">
			<p>登录</p>
		</view>
		<view class="input-box">
			<view class="input ui-1px-b">
				<p>手机号</p>
				<view class="bottom">
					<input type="number" placeholder="请填写手机号" v-model="form.mobile"
						placeholder-style="color:#999;font-weight: 500;font-size: 28rpx;" />
					<view class="get_sms" v-if="show">
						<v-button class="red" @click="get_sms" :plain="false" :throttle-time="60000"
							:custom-style="customStyle" >
							获取验证码
						</v-button>
					</view>
					<view class="gray" v-if="changeBtn">
						<span>({{ count }}s)</span>
					</view>
				</view>
			</view>
			<view class="input ui-1px-b">
				<p>验证码</p>
				<view class="sms">
					<input type="number" placeholder="请填写验证码" v-model="form.smscode"
						placeholder-style="color:#999;font-weight: 500;font-size: 28rpx;" style="padding-top: 36rpx;" />
				</view>
			</view>
		</view>
		<view class="btn">
			<button @click="login">登陆</button>
		</view>
		<view class="agreement">
			<view class="agreement_btn">
				<view class="circle" @click="show_show" :class="{'change_circle' : showbtn}"></view>
			</view>
			<p>
				新用户登录即自动注册，并表示已同意
				<span class="red">《用户服务协议》</span>
			</p>
		</view>
		<view class="login_bottom">
			<view class="bottom_top">
				<view class="bottom_name">微信快捷登陆</view>
			</view>
			<view class="bottom">
				<image src="/static/img/wx.png"  ></image>
			</view>

		</view>
	</view>
</template>

<script>
	import vButton from "pages/cart_index/components/v-button.vue";
	export default {
		components: { vButton },
		data() {
			//这里存放数据
			return {
				show: true,
				showbtn: false,
				customStyle: {
					fontSize: "24rpx", // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#FF5445'
				},
				list: [{
					disabled: false,
					ckeck: 1,
				}, ],
				value: 'orange',
				changeBtn: false,
				count: 60,
				timer: null,
				form: {
					mobile: '',
					smscode: ''
				},
				rule: {
					mobile: {
						type: "form_data",
						rules: [{
								rule: /^[1][3-9][0-9]{9}$/,
								v_res: true,
								message: "请填写正确的手机号码",
							},
							{
								rule: /^s*$/,
								v_res: false,
								message: "请填写手机号",
							},
						],
					},
					smscode: {
						type: "form_data",
						rules: [{
								rule: /^s*$/,
								v_res: false,
								message: "请填写验证码",
							},
							// {
							//     rule: /^\d{4}$/,
							//     v_res: true,
							//     message: "请填写输入正确的验证码",
							// },
						],
					},
				},
			};
		},
		//监听属性 类似于data概念
		computed: {},
		mounted() {
			// console.log("list",this.list)
		},
		//方法集合
		methods: {
			show_show() {
				// console.log("this.info",this.info.show)
				if (this.showbtn) {
					this.showbtn = false;
				} else {
					this.showbtn = true;
				}
			},
			get_sms() {
				this.show = false;
				clearInterval(this.timer);
				this.count = 60;
				this.changeBtn = !this.changeBtn;
				this.timer = setInterval(() => {
					this.count = this.count - 1;
					if (this.count < 1) {
						this.changeBtn = !this.changeBtn;
						// 停止倒计时
						clearInterval(this.timer);
						this.timer = null;
						this.count = 60;
						this.show = true;
					}
				}, 1000);
			},
			login() {
				let status = this.verification(this.form, this.rule)
				if (!status.status) return;
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
				if (e !== 1) {
					this.list.ckeck = 0
				} else {
					this.list.ckeck = 1
				}
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			}
		},
	};
</script>
<style lang='scss' scoped>
	@import './index.scss';
	.change_circle {
		background-image: url('/static/img/common_ic_12_selected.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: 50rpx 50rpx;
		border: none !important;
	}
</style>
<style>
	page {
		background-color: #fff;
	}
</style>
